<template>
  <el-card shadow="hover">
    <template slot="header">
      <el-tag type="success">{{ questionType }}</el-tag>
      <span v-if="showNumber">{{ '第' + questionNumber + '题' }}. </span>
      <el-tooltip class="m-b-10" effect="light" placement="top-start" :content="questionInfo.score + '分'">
        <el-rate class="fr" v-model="questionInfo.difficulty" disabled text-color="#ff9900"></el-rate>
      </el-tooltip>
    </template>
    <!-- 题目区 -->
    <el-row class="question-title" :gutter="10">
      <el-col :span="24">
        <div v-html="questionInfo.content"></div>
      </el-col>
    </el-row>
    <el-divider />
    <!-- 作题区 -->
    <el-row class="question-options">
      <!-- 单选 -->
      <el-col v-if="questionInfo.type == '0'" :span="24">
        <div class="question-options-item">
          <text-select v-if="questionInfo.optionType == '0'" :value="questionInfo.answer" :options="questionInfo.options" :direction="'vertical'" @input="combineAnswer" />
          <image-select v-if="questionInfo.optionType == '1'" :value="questionInfo.answer" :options="questionInfo.options" :direction="'vertical'" @input="combineAnswer" />
          <audio-select v-if="questionInfo.optionType == '2'" :value="questionInfo.answer" :options="questionInfo.options" :direction="'vertical'" @input="combineAnswer" />
        </div>
      </el-col>
      <!-- 多选 -->
      <el-col v-if="questionInfo.type == '1'" :span="24">
        <div class="question-options-item">
          <text-select v-if="questionInfo.optionType == '0'" multiple :value="optionsAnswer" :options="questionInfo.options" :direction="'vertical'" @input="combineCheckboxAnswer" />
          <image-select v-if="questionInfo.optionType == '1'" multiple :value="optionsAnswer" :options="questionInfo.options" :direction="'vertical'" @input="combineCheckboxAnswer" />
          <audio-select v-if="questionInfo.optionType == '2'" multiple :value="optionsAnswer" :options="questionInfo.options" :direction="'vertical'" @input="combineCheckboxAnswer" />
        </div>
      </el-col>
      <!-- 判断 -->
      <el-col v-if="questionInfo.type == '2'" :span="24">
        <el-radio v-model="questionInfo.answer" label="Y">对</el-radio>
        <el-radio v-model="questionInfo.answer" label="N">错</el-radio>
      </el-col>
      <!-- 填空 -->
      <el-col v-if="questionInfo.type == '3'" :span="24">
        <div class="blank_option-item" v-for="(option, index) in questionInfo.options" :key="'option_blank_' + index">
          <strong>第{{ index + 1 }}空：</strong>
          <el-input v-model="option.value" class="underline" style="width: 150px;" @input="combineBlankAnswer" />
        </div>
      </el-col>
      <!-- 主观题 -->
      <el-col v-if="questionInfo.type == '4'" :span="24">
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入答案"
          v-model="questionInfo.answer">
        </el-input>
      </el-col>
    </el-row>
    <el-divider />
    <!-- 解答区 -->
    <el-row v-if="showAnswer" class="answer">
      <el-col :span="5"><el-tag type="info" style="cursor: pointer" @click="checkAnswer">获取答案：</el-tag></el-col>
      <el-col v-if="showResult" :span="19">
        <el-tag v-for="result in correctAnswer" :key="'answer_' + result" type="success" class="m-l-5">{{ result }}</el-tag>
      </el-col>
    </el-row>
    <el-row v-if="showResult" class="m-b-20">
      <el-col :span="5">
        <el-tag v-if="isCorrect" type="success">回答正确</el-tag>
        <el-tag v-else type="danger">回答错误</el-tag>
      </el-col>
    </el-row>
    <!-- 解析区 -->
    <el-row v-if="showResult" class="analysis">
      <el-col :span="24" class="m-b-10"><strong>解析：</strong></el-col>
      <el-col :span="24" style="border: #e6f1fe;">
        <span v-html="questionInfo.analysis"></span>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import TextSelect from '@/components/Form/TextSelect'
import ImageSelect from '@/components/Form/ImageSelect'
import AudioSelect from '@/components/Form/AudioSelect'
import { questionPreview, questionAnswer } from '@/api/training/exam'

export default {
  name: 'QuestionPreview',
  components: {
    TextSelect,
    ImageSelect,
    AudioSelect
  },
  props: {
    questionNumber: {
      type: Number,
      default: 1
    },
    showNumber: {
      type: Boolean,
      default: true
    },
    showAnswer: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    questionType() {
      switch (this.questionInfo.type) {
        case '0':
          return '单选'
        case '1':
          return '多选'
        case '2':
          return '判断'
        case '3':
          return '填空'
        case '4':
          return '简答'
        default:
          return ''
      }
    }
  },
  data() {
    return {
      questionInfo: {
        questionId: undefined,
        type: '0',
        optionType: '0',
        content: undefined,
        analysis: undefined,
        answer: undefined,
        difficulty: 1,
        score: 1,
        tagId: undefined,
        options: []
      },
      optionsAnswer: [],
      correctAnswer: [],
      showResult: false,
      isCorrect: false
    }
  },
  methods: {
    init(questionId) {
      this.questionInfo = {
        questionId: undefined,
        type: '1',
        optionType: '0',
        content: undefined,
        analysis: undefined,
        answer: undefined,
        difficulty: 1,
        score: 1,
        tagId: undefined,
        options: []
      }
      this.optionsAnswer = []
      this.correctAnswer = []
      this.showResult = false
      this.isCorrect = false

      this.$nextTick(() => {
        this.questionInfo.questionId = questionId || null
        this.loadForm(questionId)
      })
    },
    loadForm(questionId) {
      this.loaded = false
      questionPreview(questionId, true).then(response => {
        this.questionInfo = this.$api.objectUpdate(this.questionInfo, response.param)
      })
    },
    combineAnswer(val) {
      this.questionInfo.answer = val
    },
    combineCheckboxAnswer(val) {
      this.questionInfo.answer = val?.join('{:}')??''
    },
    combineBlankAnswer() {
      let answer = []
      this.questionInfo.options.forEach(option => {
        answer.push(option.value)
      })
      this.questionInfo.answer = answer?.join('{:}')??''
    },
    checkAnswer() {
      if (this.correctAnswer.length > 0) {
        return
      }

      questionAnswer(this.questionInfo.questionId).then(response => {
        this.correctAnswer = response.param.answer
        this.questionInfo.analysis = response.param.analysis
        this.isCorrect = this.checkCorrect(this.correctAnswer)
        this.showResult = true
      })
    },
    checkCorrect(answer) {
      if (this.questionInfo.type === '1') {
        // 多选
        let flag = 0
        let check_answer = this.questionInfo.answer.split('{:}')
        if (answer.length === check_answer.length) {
          for (let i in answer) {
            if (check_answer.indexOf(answer[i]) !== -1) {
              flag++
            }
          }
          if (flag === answer.length) {
            return true
          }
        }
        return false
      } else if (this.questionInfo.type === '3') {
        // 填空
        return answer.join('{:}') === this.questionInfo.answer
      } else {
        // 其它
        return answer[0] === this.questionInfo.answer
      }
    }
  }
}
</script>
<style lang="less" scoped>
.question-title {
  font-weight: bold;
}
.question-options-item {
  background: #e5e9f2;
}

.blank_option-item {
  display: block;
  margin-bottom: 5px;

  /deep/.underline {
    .el-input__inner {
      border-radius: 0px;
      border-top-width: 0px;
      border-left-width: 0px;
      border-right-width: 0px;
      border-bottom-width: 1px;
    }
  }
}

.answer {
  margin-bottom: 5px;
}
</style>
